<template>
	<view class="login" :style="{'--color':vuex_config.themeColor1}">
		<view class="l-banner">
			<image class="image" src="http://klwl-file.oss-cn-shenzhen.aliyuncs.com/202105/jhstest/52839679236503.png"
				mode="widthFix"></image>
		</view>
		<view class="username" :class="{useractive:current == 1}">
			<view class="iconfont iconfont-e619 mr-20"></view>
			<u-input class="input" type="number" v-model="dataForm.username" :clearable='false' @blur="accountBlur"
				:placeholder-style="current == 1?'color:#49a3f1':''" placeholder="请输入手机号" @focus="focus(1)" />
			<view class="post_msg" v-if="mobileMsg && mobileMsg != 1">{{mobileMsg}}</view>
		</view>
		<view class="username" :class="{useractive:current == 2}">
			<view class="iconfont iconfont-e619 mr-20"></view>
			<u-input class="input" type="text" v-model="dataForm.checkNum" :clearable='false'
				:placeholder-style="current == 2?'color:#49a3f1':''" placeholder="验证码" @focus="focus(2)" @blur="blur" />
			<view :class="['btn',mobileMsg == 1 && timer?'able_mnc':'']" @click="getCheckNum">
				{{timer?'获取验证码':Count+'秒'}}
			</view>
		</view>
		<view class="username" :class="{useractive:current == 3}">
			<view class="iconfont iconfont-e619 mr-20"></view>
			<u-input class="input" type="password" v-model="dataForm.password" :clearable='false' :password-icon='false'
				:placeholder-style="current == 3?'color:#49a3f1':''" maxlength='16' placeholder="请输入新密码"
				@focus="focus(3)" @blur="blur" />
		</view>
		<view class="login-btn" @click="toSubmit">提交</view>
	</view>
</template>

<script>
	import {
		uniBack
	} from '@/utils/uniPromise.js'
	import {
		isMobile
	} from '@/utils/validate.js'
	import {
		mapState,
		mapActions
	} from 'vuex';
	import md5Libs from "@/uview-ui/libs/function/md5";
	export default {
		data() {
			return {
				mobileMsg: '', // 1:'可使用' 其他：错误信息
				current: 0,
				loading: false,
				dataForm: {
					username: '',
					password: '',
					checkNum: ''
				},
				timer: true, // 是否可以点击开启定时器
				Count: 60, // 倒计时
			}
		},
		onLoad(options) {

		},
		methods: {
			...mapActions(['loadUserInfo']),
			focus(index) {
				this.current = index
			},
			accountBlur() {
				this.blur()
				if (!isMobile(this.dataForm.username)) {
					this.mobileMsg = '请输入正确的手机号'
				} else {
					this.$resPost('VerifyPhoneRegister', {
						phone: this.dataForm.username
					}).then((res) => {
						if (res.data == 1) {
							this.mobileMsg = 1
						} else {
							this.mobileMsg = '账号不存在'
						}
					}).catch(() => {
						this.mobileMsg = '网络异常'
					})

				}
			},
			blur(val) {
				this.current = 0
			},
			// 点击获取验证码
			getCheckNum() {
				if (this.timer && this.mobileMsg == 1) {
					this.timer = false
					this.setTime();
					this.$resPost('SendSMSVerificationCode', {
						phone: this.dataForm.username,
						type: 3
					})
				}
			},
			//倒计时
			setTime() {
				let Count = this.Count
				if (Count <= 0) {
					this.Count = 60,
						this.timer = true
					return
				}
				setTimeout(() => {
					this.Count = Count - 1
					this.setTime();
				}, 1000);
			},
			toSubmit() {
				// 验证手机号是否存在
				if (!isMobile(this.dataForm.username)) {
					this.$toast({
						title: '手机号不正确',
						duration: 800
					})
				} else if (this.dataForm.password.length < 6) {
					this.$toast({
						title: '密码不能小于6位',
						duration: 800
					})
				} else if (!this.dataForm.checkNum) {
					this.$toast({
						title: '请输入验证码',
						duration: 800
					})
				} else {
					this.sureEdit()
				}

			},
			sureEdit() {
				this.$loading()
				let params = {
					phone: this.dataForm.username,
					password: md5Libs.md5(this.dataForm.password),
					code: this.dataForm.checkNum,
				}
				this.$resPost('RetrievePassword', params).then(() => {
					this.$hide()
					uni.showToast({
						title: '密码重置成功',
						icon: 'success',
						success: () => {
							setTimeout(() => {
								uniBack()
							}, 800);
						}
					})
				})
				// uni.login({
				// 	provider: 'weixin',
				// 	success: loginRes => {
				// 		let obj = {
				// 			openid: loginRes.authResult.openid
				// 		}
				// 		this.startReset(obj)
				// 	},
				// 	fail: err => {
				// 		this.startReset()
				// 	}
				// });
			}
		},
		startReset(obj = {}) {

		}
	}
</script>

<style lang='scss' scoped>
	.login {
		padding: 0 120rpx;

		/* height: 100vh; */
		.l-banner {
			width: 100%;
			display: flex;
			justify-content: center;
			padding-top: 150rpx;
			margin-bottom: 80rpx;

			.image {
				width: 155rpx;
			}
		}

		.username {
			padding-bottom: 8rpx;
			border-bottom: 1px solid #e5e5e5;
			display: flex;
			align-items: center;
			margin-top: 30rpx;
			position: relative;

			.post_msg {
				color: #f05b29;
				position: absolute;
				line-height: 40rpx;
				bottom: -40rpx;
				left: 0;
				font-size: 22rpx;
			}

			.btn {
				padding: 10rpx 20rpx;
				border: 1rpx solid #D7D7D7;
				background: #fff;
				color: #888888;
				font-size: 28rpx;
				width: 190rpx;
				text-align: center;
				margin-left: 16rpx;

				&.able_mnc {
					border-color: var(--color);
					color: var(--color);
				}
			}

			.iconfont {
				margin-right: 20rpx;
			}

			.input {
				flex: 1;
				overflow: hidden;
			}
		}

		.mb-20 {
			margin-bottom: 45rpx;
		}

		.mr-20 {
			margin-right: 20rpx;
		}

		.login-btn {
			margin-top: 110rpx;
			margin-bottom: 30rpx;
			width: 100%;
			background-color: #49a3f1;
			color: #fff;
			text-align: center;
			line-height: 90rpx;
			border-radius: 20rpx;
		}

		.login-read {
			display: flex;
			align-items: center;
			color: #999;
			padding: 0 0 0 30rpx;

			.buy-icon {
				margin-right: 18rpx;
				color: #49a3f1;
				font-size: 34rpx;
			}

			.title {
				color: #49a3f1;
			}
		}

		.useractive {
			color: #49a3f1;
			border-color: #49a3f1;
		}

		.prop-title {
			display: flex;
			justify-content: center;
			align-items: center;
			line-height: 90rpx;
			border-bottom: 1px solid #e5e5e5;
		}

		.prop-content {
			height: 450rpx;
		}

		.prop-btn {
			border-top: 1px solid #e5e5e5;
			color: #49a3f1;
			display: flex;
			justify-content: center;
			align-items: center;
			line-height: 80rpx;
		}
	}
</style>
